<template>
  <div class="index-header">
    
    <div class="container header-top" >
      <h1 class="header-top-left">Hi ! 欢迎来到嘉宝橱柜衣柜定制 ！</h1> 
      <ul class="header-top-right">
        <li>收藏嘉宝</li>
        <li>关注嘉宝</li>
        <li>售前咨询热线：400-0188-608</li>
        <li>售后电话：0731-88334455</li>
        <!-- <li>登录</li> -->
        <!-- <li>注册</li> -->
      </ul>
    </div>
    <div class="header-bottom">
      <div class="container">
        <img class="logo" @click="toindex()" src="@/assets/index/logo2.png" alt="">
        <div class="headeer-bottom-right">
          <div class="search">
            <input type="text">
            <!-- <i class="el-icon-search"></i>  -->
            <img class="search-i" src="@/assets/index/search-i.png" alt="">
          </div> 
          <!-- <div class="pinpai">
            <img src="@/assets/index/pinpai.png" alt=""></div>  -->
          <ul class="type">
            <li class="type-item">
              <router-link 
              tag="a" target="_blank"
              to = "/">首页</router-link>
            </li>
            <li class="type-item">
              <router-link  
             
              target="_blank"
              :to="{name:'productList', params: {style:'风格',name:'橱柜'}}" >橱柜</router-link  >
            </li>
            <li class="type-item">
              <router-link 
              tag="a" target="_blank"
              :to="{name:'productList', params: {style:'风格',name:'衣柜'}}">全屋定制</router-link>
            </li>
            <li class="type-item">
              <router-link 
              tag="a" target="_blank"
              :to="{name:'deisgnList'}">设计案例</router-link>
            </li>
            <li class="type-item">
              <router-link 
              tag="a" target="_blank"
              :to="{name:'productList', params: {style:'现代简约风格',name:'衣柜'}}">定制攻略</router-link>
            </li>
            <li class="type-item">
              <router-link 
              tag="a" target="_blank"
              :to="{name:'deisgnList'}">预约设计</router-link>
            </li>
            <li class="type-item">
              <router-link 
              tag="a" target="_blank"
              :to="{name:'productList', params: {style:'现代简约风格',name:'衣柜'}}">招商加盟</router-link>
            </li>
            <li class="type-item">
              <router-link 
              tag="a" target="_blank"
              :to="{name:'productList', params: {style:'现代简约风格',name:'衣柜'}}">关于嘉宝</router-link>
            </li>
          </ul>
        </div>
        
      </div>
      
    </div>
    
  </div>
</template>

<script>
// const {href} = this.$router.resolve({
//   name: "statistics-explain",
//   params: {
//       classID: id,
//       examSubjectID: this.planClassData.examSubjectID,
//       studentStatus: 0
//   }
// });
// window.open(href, '_blank');
export default {
  name: 'IndexHeader',
  data () {
    return {
      msg: 'index'
    }
  },
  methods:{
    toindex(){
      this.$router.push('/');
    }
  }
}
</script>

<style lang="stylus" scoped>
@import "~styles/varibles.styl"
@import "~styles/mixins.styl"
.index-header
  position relative  
  background #f2f0f0
  height 150px
.header-top
    height 30px
    
    line-height 30px
    .header-top-left
        float left
    .header-top-right
        float right
        overflow hidden
      .header-top-right>li
        float left
        padding 0 10px  
.header-bottom
  // z-index 9999
  position absolute
  width 100%
  background white
  height 120px
.header-bottom>.container
  position relative
  .logo
    float left
    margin-top 15px
  .pinpai
    position absolute
    right 0
    top 0
  .headeer-bottom-right
    float right
    position relative
  .type
    overflow hidden
    
    // margin-left 250px
    .type-item
      float left
      color white
      
.type-item>a
  font-size 20px
  line-height 80px
  display block
  padding 0 9px
  color #000000
.search
  position relative
  width 360px
  height 34px
  position relative
  margin-top 27px
  margin-left 340px
.search-i
  position absolute
  right -2px
  top 0
.search>input
  width 100%
  height 100%
  border 1px solid #00a6ba
  text-indent  12px
  // border-radius 34px
.search>i
  position absolute 
  right 10px
  top 10px
  // background #00a6ba
  
.container
  container()  
</style>
